<!--
 * @Author: 白印潇 bai_yinxiao@163.com
 * @Date: 2023-03-20 16:43:55
 * @LastEditors: 白印潇 bai_yinxiao@163.com
 * @LastEditTime: 2023-03-23 16:59:21
 * @FilePath: /shortRent-ui/src/views/car/illegal/components/addIlleaglOrder.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog title="违章查询" :visible.sync="visible" width="30%" @close="close">
    <div>
      <el-form :model="formData" ref="formData" :rules="rules" label-position="left" label-width="120px" :inline="false"
        size="normal">
        <!-- 12312平台 -->
        <template v-if="type == 1">
          <el-form-item label="查询车辆" prop="queryMode">
            <el-radio-group v-model="formData.queryMode">
              <el-radio :label="0">全部车辆</el-radio>
              <el-radio :label="1">部分车辆</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="formData.queryMode == 1" label="查询账号:" prop="workOrderAccountIdList">
            <el-select style="width: 70%;" v-model="formData.workOrderAccountIdList" multiple filterable placeholder="请选择查询账号"
              @change="getQueryCarCount">
              <el-option v-for="(item) in companyList" :key="item.id" :label="formatName(item)" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </template>

        <!-- 深圳交警 -->
        <template v-else-if="type == 2">
          <p>确定提交违章查询工单?</p>
        </template>

        <!-- 都有 -->
        <template v-else-if="type == 0">
          <el-form-item label="查询平台" prop="platform">
            <el-radio-group v-model="formData.platform" @input="changePlatform">
              <el-radio :label="1">12123平台</el-radio>
              <el-radio :label="2">深圳交警</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 当选择为12123的时候展示查询车辆 -->
          <el-form-item v-if="formData.platform == 1" label="查询车辆" prop="queryMode">
            <el-radio-group v-model="formData.queryMode">
              <el-radio :label="0">全部车辆</el-radio>
              <el-radio :label="1">部分车辆</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 当选择部分车辆的时候显示车辆所属公司 -->
          <el-form-item v-if="formData.queryMode == 1" label="查询账号:" prop="workOrderAccountIdList">
            <el-select style="width: 70%;" v-model="formData.workOrderAccountIdList" multiple filterable placeholder="请选择查询账号"
              @change="getQueryCarCount">
              <el-option v-for="(item) in companyList" :key="item.id" :label="formatName(item)" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </template>
      </el-form>
<!--      <span v-if="type != 2" style="font-weight: bold;">共计:{{ carCount }} 辆车</span>-->
    </div>

    <span slot="footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="confim">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import * as illegalApi from '@/api/car/illegal';
export default {
  data() {
    return {
      visible: false,
      companyList: [],//车辆所属公司
      type: 0, //1.只有12312平台 2.只有深圳交警 0.都有
      formData: {
        platform: 1, //查询平台 1:12312平台 2:深圳交警
        queryMode: 0, // 查询车辆 0:全部 1部分
        workOrderAccountIdList: [],//车辆所属公司
      },
      rules1: {//12123->部分车辆
        workOrderAccountIdList: [
          { type: 'array', required: true, message: '请选择查询账号', trigger: 'blur' }
        ]
      },
      carCount: 0
    }
  },
  computed: {
    rules() {
      let rules = {};
      if (this.formData.platform == 1 && this.formData.queryMode == 1) {//12123->部分车辆
        rules = this.rules1;
      }
      return rules;
    }
  },
  created() {
    this.getCompanyList();
  },
  methods: {
    // 获取查询车辆个数
    getQueryCarCount() {
      // illegalApi.illegalOrderCarCount(this.formData).then(res => {
      //   this.carCount = res.data;
      // })
    },
    // 查询平台发生改变
    changePlatform(platform) {
      if (platform == 2) {//如果是深圳交警
        this.formData.queryMode = 0;//查询车辆->全部;
      }
      this.getQueryCarCount();
    },
    //获取所属公司列表
    getCompanyList() {
      // illegalApi.illegalAcountOrgList().then(res => {
      //   this.companyList = res.data;
      // })

      illegalApi.illegalAccountList({
        pageNum: 1,
        pageSize: 999,
        platform:1,
        enableFlag:1
      }).then(res => {
        this.companyList = res.rows;
      })
    },
    formatName(item){
      if(item.orgList && item.orgList.length){
        return `${item.account}(${item.orgList[0].name})`
      }else {

        return item.account
      }
    },
    // 确定添加违章查询工单
    confim() {
      this.$refs.formData.validate((valid) => {
        if (valid) {

          if(this.formData.platform==1){
            if(this.formData.queryMode==0){
              this.formData.workOrderAccountIdList = []
            }
          }else if(this.formData.platform==2){
            this.formData.queryMode = 0
            this.formData.workOrderAccountIdList = []
          }

          this.$confirm('确认添加违章工单吗?', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
          }).then(() => {
            illegalApi.addIllegalWorkOrder(this.formData).then(res => {
              if (res.code == 200) {
                this.close();
                this.$emit('success');
                this.$message({
                  type: 'success',
                  message: '添加成功'
                });
              }
            })
          })
        }

      })

    },
    show(type) {
      this.type = type;
      if (type == 2) {//如果只有深圳交警->查询平台默认赋值为2
        this.formData.platform = 2;
      }
      this.getQueryCarCount();
      this.visible = true;
    },
    close() {
      this.visible = false;
    }
  },
}
</script>
<style lang="">

</style>
